Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vite: Enable use of vite preview to preview built SPA sites #8624

Merged
merged 6 commits into from
Feb 8, 2024
Merged

vite: Enable use of vite preview to preview built SPA sites #8624

merged 6 commits into from
Feb 8, 2024

Conversation

ngbrown
Copy link
Contributor

@ngbrown ngbrown commented Jan 29, 2024 •
edited
Loading

This enables use of vite preview for serving built SPA sites. This works better than http-server because it correctly supports the SPA fallback (i.e. serving a statically deployed site with all routes being served from a root /index.html).

This is more than a template change because the Remix Vite plugin was setting appType: "custom", preventing vite preview from working in "spa" mode. The patch also sets the build.outDir when previewing so additional command line options aren't needed.

The SPA template has been updated to use npm run preview (or yarn preview) to preview the built site. The start script (npm run start) has been removed from the SPA template because it isn't something that should be used in production.

Closes #8623

  • Docs (template/spa/README.md)

Testing Strategy:

I opened up my windows machine and ran this script (PowerShell):

Remove-Item -Recurse .\scripts\playground\template.local\
Copy-Item -Recurse .\templates\spa .\scripts\playground\template.local
yarn playground:new
cd .\playground\playground-1706546017969 # use directory name produced by previous command
echo "export default function Hello() { return <>Hello</>; }" | Out-File ./app/routes/hello.tsx -Encoding utf8
echo "import { Link } from `"@remix-run/react`";`n`nexport default function Index() { return <Link to=`"/hello`">Navigate</Link>; }" | Out-File ./app/routes/_index.tsx  -Encoding utf8
npm run dev
npm run build
npm run preview

Open browser to link provided by vite preview and click on the "Navigate" link to arrive at http://localhost:4173/hello (port may differ). Refresh the page (e.g. F5), and the page should load without a 404. Also try navigating directly to that URL in a new tab.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 29, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 4a757cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@remix-run/dev Patch
create-remix Patch
remix Patch
@remix-run/architect Patch
@remix-run/cloudflare Patch
@remix-run/cloudflare-pages Patch
@remix-run/cloudflare-workers Patch
@remix-run/css-bundle Patch
@remix-run/deno Patch
@remix-run/eslint-config Patch
@remix-run/express Patch
@remix-run/node Patch
@remix-run/react Patch
@remix-run/serve Patch
@remix-run/server-runtime Patch
@remix-run/testing Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@ngbrown
Copy link
Contributor Author

ngbrown commented Jan 29, 2024 •
edited
Loading

I also implemented the required Remix changes as a patch against @remix-run/[email protected]:

@remix-run+dev+2.5.1.patch

And for @remix-run/[email protected]:

@remix-run+dev+2.6.0.patch

@ngbrown ngbrown force-pushed the vite-spa-preview branch 2 times, most recently from 732b27c to 1fa723c Compare January 29, 2024 23:15
@ngbrown ngbrown changed the title vite/spa: Allow use of vite preview for correct preview of build vite: Enable use of vite preview to preview built SPA sites Jan 29, 2024
@brophdawg11
Copy link
Contributor

This works better than http-server because it correctly supports the SPA fallback.

What is the "SPA Fallback" you're referring to here? Remix SPA mode renders the root HydrateFallback on initial load while client JS loaders and clientLoaders execute - is "SPA Fallback" referring to another form of fallback UI?

has been removed from the SPA template because it isn't something that should be used in production

I kind of liked start + http-server because it was something you could deploy in production. But I'm not too sure how many folks are serving their SPA's that way in prod versus a static CDN host, or a custom HTTP server of their own - so maybe it's fine for the template not to have an opinion there.

@brophdawg11 brophdawg11 added vite feat:spa Issues related to SPA Mode labels Jan 30, 2024
@brophdawg11
Copy link
Contributor

oh, I see the linked issue now - nvm my question about the fallback, we can discuss in #8623

@ngbrown
Copy link
Contributor Author

ngbrown commented Jan 30, 2024

What is the "SPA Fallback" you're referring to here?

I was using what seemed to be the most common parlance used in the web server discussions, but it's not super obvious. I meant the option to serve up the root-directory index.html when a path 404's, no matter the route. It's something that became common when react and react-router were serving multiple URL paths from a single index.html file.

@ngbrown ngbrown force-pushed the vite-spa-preview branch 6 times, most recently from 58587bf to 4e21925 Compare February 5, 2024 20:19
@brophdawg11 brophdawg11 self-assigned this Feb 6, 2024
@ngbrown
Copy link
Contributor Author

ngbrown commented Feb 6, 2024

@brophdawg11 I see that you are about to stabilize SPA mode. I just rebased this on the most recent dev branch. I also tested it again.

Let me know if you have any suggestions for what you would like to see changed.

@ngbrown ngbrown mentioned this pull request Feb 7, 2024
Merged
brophdawg11
brophdawg11 approved these changes Feb 8, 2024
View reviewed changes
Copy link
Contributor

@brophdawg11 brophdawg11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@brophdawg11 brophdawg11 merged commit fff83ad into remix-run:dev Feb 8, 2024
9 checks passed
@brophdawg11 brophdawg11 mentioned this pull request Feb 8, 2024
Merged
@ngbrown ngbrown deleted the vite-spa-preview branch February 8, 2024 17:27
@github-actions github-actions bot mentioned this pull request Feb 16, 2024
Merged
@github-actions GitHub Actions
Copy link
Contributor

🤖 Hello there,

We just published version 2.7.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions github-actions bot mentioned this pull request Feb 20, 2024
Merged
@github-actions GitHub Actions
Copy link
Contributor

🤖 Hello there,

We just published version 2.7.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brophdawg11 brophdawg11 brophdawg11 approved these changes

Assignees

@brophdawg11 brophdawg11

Labels
CLA Signed feat:spa Issues related to SPA Mode vite
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ngbrown @brophdawg11